<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>

<div id="a" style="margin-bottom: 200px">
  <fieldset>
    <legend>if: 注册</legend>
    <a href="#" @click="flag='email'">邮箱注册</a>
    <a href="#" @click="flag='phone'">手机注册</a>
    <a href="#" @click="flag='chat'">微信注册</a>
    使用key给控件加唯一标识,
    <div v-if="flag == 'email'">
      邮箱地址:<input key="1">
    </div>
    <div v-else-if="flag == 'phone'">
      电话号码:<input key="2">
    </div>
    <div v-else>
      微信号码:<input>
    </div>
  </fieldset>

  <fieldset>
    <legend>show: 成绩</legend>
    分数:<input type="number" v-model="score">
    <span v-show="score <60">不及格</span>
    <span v-show="score >=60 && score <80">及格</span>
    <span v-show="score >=80 && score <90">良好</span>
    <span v-show="score >=90 ">优秀</span>
  </fieldset>

  <fieldset>
    <legend>for</legend>
    <span>
      <input v-for="like in likeItems" type="radio" value="like">{{like}}
    </span>
  </fieldset>
</div>


<script>
    var v = new Vue({
      el : '#a',
      data: {
        flag: "email",
        score : 0,
        likeItems : ['篮球','电影','手游','看书']
      }
    })
</script>
</body>
</html>